<script setup lang="ts">
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { useStore } from "@store/index";
// 定义路由实例
const router = useRouter();

const store = useStore();

// 定义用户登录信息的接口
interface formData {
    name: string;
    password: string;
}

// 定义响应式数据
const ruleForm: formData = reactive({
    name: "",
    password: "",
});

// 定义校验规则
const rules = {
    name: [
        {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
        },
        {
            min: 3,
            max: 5,
            message: "长度必须在3~5之间",
            trigger: "blur",
        },
    ],
    password: [
        {
            required: true,
            message: "请输入密码",
            trigger: "blur",
        },
        {
            min: 5,
            max: 12,
            message: "长度必须在5~12之间",
            trigger: "blur",
        },
    ],
};

// ref用于定义获取dom元素 和 定义单值响应式数据
const ruleFormBox = ref();

// 定义方法
const submitForm = (): void => {
    ruleFormBox.value.validate((vaild: boolean) => {
        if (vaild) {
            fetch("/api/login", {
                method: "POST",
                body: JSON.stringify(ruleForm),
            })
                .then(res => res.json())
                .then(res => {
                    if (res.code === 200) {
                        store.commit("user/loginInfo", res.data);
                        router.replace("/home");
                    } else {
                        ElMessage.error(res.msg);
                    }
                });
        } else {
            console.log("error");
            return false;
        }
    });
};
const resetForm = (): void => {
    ruleFormBox.value.resetFields();
};
</script>

<template>
    <div class="login-box">
        <div class="form-box">
            <header class="login-title">Vite+TS练习项目</header>
            <main>
                <el-form
                    ref="ruleFormBox"
                    :model="ruleForm"
                    :rules="rules"
                    label-width="120px"
                    class="demo-ruleForm"
                >
                    <el-form-item label="用户名" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <!-- show-password 带有查看功能的密码框 -->
                        <el-input
                            show-password
                            v-model="ruleForm.password"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm()"
                            >登录</el-button
                        >
                        <el-button @click="resetForm()">重置</el-button>
                    </el-form-item>
                </el-form>
            </main>
        </div>
    </div>
</template>

<style scoped lang="less">
.login-box {
    position: relative;
    height: 100%;
    background: url("@/assets/login_main.jpg");
    background-size: 100% 100%;
    .form-box {
        position: absolute;
        right: 10%;
        top: 30%;
        width: 25%;
        min-width: 300px;
        height: 230px;
        background-color: #ccc;
        padding: 30px 40px 30px 0;
        opacity: 0.8;
        .login-title {
            font-size: 24px;
            margin-bottom: 20px;
            text-align: center;
        }
    }
}
</style>
